<template>
	<div>
		会议登记
		<el-row>
		  <el-col :span="24">
			  
			  <el-form :inline="true" :model="formInline" class="demo-form-inline">
			    <el-form-item label="用户名">
			      <el-input size="small" v-model="formInline.name" placeholder="请输入用户名"></el-input>
			    </el-form-item>
				
				<el-form-item label="地址">
				  <el-input size="small" v-model="formInline.address" placeholder="请输入地址"></el-input>
				</el-form-item>
			   
			    <el-form-item>
			      <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
			    </el-form-item>
			  </el-form>
			  
			  
		  </el-col>
		</el-row>
		
		<el-row>
		  <el-col :span="24">
			  <el-button type="primary" icon="el-icon-plus" size="mini" plain @click="dialogFormVisible=true">新增</el-button>
			  <el-button type="danger" icon="el-icon-search">搜索</el-button>
			  <el-button type="info" icon="el-icon-search">搜索</el-button>
			  
		  </el-col>
		</el-row>
		
		<el-row>
		  <el-col :span="24">
			  <!-- 
			   1. :data 数据 对象数组 [{}]
			   2.  el-table-column   prop 数据项的名称  label 列名
			   -->
			   <el-table
			        :data="tableData"
			        style="width: 100%"  @sort-change="sortData">
			        <el-table-column
			          prop="id"
			          label="序号"
			          width="180"
					  sortable="custom"
					  >
			        </el-table-column>
			        <el-table-column
			          prop="name"
			          label="姓名"
			          width="180">
			        </el-table-column>
					<el-table-column
					  prop="password"
					  label="密码"
					  width="180">
					</el-table-column>
					<el-table-column
					  prop="address"
					  label="地址"
					  width="180">
					</el-table-column>
					<el-table-column
					  prop="avatar"
					  label="头像"
					  width="180">
					</el-table-column>
					<el-table-column
					  prop="createdAt"
					  label="创建时间"
					  width="180">
					</el-table-column>
					
					
					
					<el-table-column
					  label="操作"
					  width="180">
					  
					  <template slot-scope="a">
					  	<el-button type="primary" icon="el-icon-edit" circle @click="edit(a.row)"></el-button>
						
						
						<el-popconfirm
						@confirm="del(a.row.id)"
						  title="这是一段内容确定删除吗？"
						>
						  <!-- <el-button slot="reference">删除</el-button> -->
						  <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
						</el-popconfirm>
					  </template>
					</el-table-column>
			      </el-table>
			  
		  </el-col>
		</el-row>
		
		<el-row>
		  <el-col :span="24" style="display: flex;justify-content: end;">
			  <el-pagination
			        @size-change="handleSizeChange"
			        @current-change="handleCurrentChange"
			        :current-page="formInline.pageNo"
			        :page-sizes="[2,10, 20, 30, 40]"
			        :page-size="formInline.pageSize"
			        layout="total, sizes, prev, pager, next, jumper"
			        :total="total">
			      </el-pagination>
		  </el-col>
		</el-row>
		
		
		<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
		  <el-form :model="form">
		    <el-form-item label="会员名称" :label-width="formLabelWidth">
		      <el-input v-model="form.name" autocomplete="off"></el-input>
		    </el-form-item>
			<el-form-item label="会员地址" :label-width="formLabelWidth">
			  <el-input v-model="form.address" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="会员密码" :label-width="formLabelWidth">
			  <el-input v-model="form.password" autocomplete="off" show-password></el-input>
			</el-form-item>
		    
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="add">确 定</el-button>
		  </div>
		</el-dialog>
		
	</div>
</template>

<script>
	import axios from 'axios'
	
	import { getLevels,
	addUser,getOne,editUser,delUser } from '../api/level.js'
	
  export default {
    data() {
      return {
        formInline: {
          name: '',
          address: '',
		  pageNo:1,
		  pageSize:10,
		  sort:"id",
		  order:"desc"
        },
		total:0,
		tableData: [],
		  dialogFormVisible: false,
		  form: {
			name: '',
			address: '',
			password: ''
		  },
		          formLabelWidth: '120px',
				  dialogTitle:"新增会员"
      }
    },
    methods: {
      onSubmit() {
        this.getData();
      },
	  del(id){
		 
		  delUser({id}).then(res=>{
			  if(res.data.code==200){
			  	this.$message({
			  		message:"删除成功",
			  		type:"success"
			  	})
			  }else{
			  	this.$message({
			  		message:res.data.message,
			  		type:"error"
			  	})
			  	
			  }
		  })
		  this.getData();
	  },
	  add(){
		  
		  if(this.form.id>0){
			  // 新增
			  editUser(this.form).then(res=>{
			  	if(res.data.code==200){
			  		this.$message({
			  			message:"编辑成功",
			  			type:"success"
			  		})
			  	}else{
			  		this.$message({
			  			message:res.data.message,
			  			type:"error"
			  		})
			  		
			  	}
			  	this.dialogFormVisible = false;
			  	
			  	this.getData();
			  }) 
		  }else{
			  // 新增
			  addUser(this.form).then(res=>{
			  	if(res.data.code==200){
			  		this.$message({
			  			message:"新增成功",
			  			type:"success"
			  		})
			  	}else{
			  		this.$message({
			  			message:res.data.message,
			  			type:"error"
			  		})
			  		
			  	}
			  	this.dialogFormVisible = false;
			  	
			  	this.getData();
			  }) 
		  }
		  
		 
	  },
	  sortData(res){
		  console.log(res)
		  if(res.order=="descending"){
			  this.formInline.order="desc";
		  }else{
			  this.formInline.order="asc";
		  }
		  this.formInline.sort=res.prop;
		  this.getData();
	  },
	  handleCurrentChange(num){
		  this.formInline.pageNo = num;
		  
		  this.getData();
	  },
	  handleSizeChange(size){
		  this.formInline.pageSize = size;
		  
		  this.getData();
	  },
	  edit(user){
		  this.dialogFormVisible = true;
		  this.dialogTitle = "编辑会员";
		  
		  // this.form.name =user.username;
		  // this.form.region =user.address;
		  
		  //发送请求
		  getOne(user.id).then(res=>{
			  console.log(res.data)
			  this.form = res.data;
		  })
	  },
	  getData(){
		  getLevels(this.formInline).then((res)=>{
			this.tableData  = res.data.data.rows;
			this.total = res.data.data.total;
		  })
	  }
    },
	mounted() {
		// axios.get("/api/user/list").then((res)=>{
		// 	let data = res.data.data.rows;
		// 	console.log(data)
		// 	this.tableData = data;
		// })
		
		// axios.get("/api/user/list").then((res)=>{
		// 	this.tableData  = res.data.data.rows;
		// })
		this.getData()
		
	}
  }
</script>

<style>
</style>